<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$Think.lang.artadd}</title>
    <link rel="stylesheet" href="__ADMIN__/vendor/layui/css/layui.css">
    <link rel="stylesheet" href="__ADMIN__/custom/css/style.css">
    <style>
        .layui-form-select dl {
            z-index: 2;
        }

        #thumb_list {
            padding-top: 8px;
        }

        #thumb_list img {
            border: 1px solid #DDD;
            padding: 3px;
            border-radius: 5px;
        }

        #thumb_list span {
            position: relative;
            display: inline-block;
            margin-right: 5px;
        }

        #thumb_list span .delimg {
            position: absolute;
            right: 3px;
            top: 3px;
        }
    </style>
</head>

<body style="padding:10px 10px;margin-bottom: 50px;">
    <div class="layui-container">
        <form class="layui-form" action="{:url('article/save')}" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.cloumn}</label>
                <div class="layui-input-inline">
                    <select name="cid" required lay-verify="required" lay-filter="lanmu">
                        <option value="0">{$Think.lang.select}</option>
                        {volist name="cate" id="vo"}
                        <option value="{$vo.id}" type="{$vo.typeid}">{$vo.cate_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.title}</label>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input"  lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.keyword}</label>
                <div class="layui-input-block">
                    <input type="text" name="keyword" placeholder="{$Think.lang.keyword}" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.dsec}</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="{$Think.lang.dsec}" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.zhanyao}</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="{$Think.lang.zhanyao}" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="model" style="display: none;">
                <label class="layui-form-label">{$Think.lang.model}</label>
                <div class="layui-input-block">
                    <input type="text" name="model" placeholder="{$Think.lang.model}" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div id="team" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">{$Think.lang.zhiwu}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="zhiwu" placeholder="{$Think.lang.zhiwu}" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">{$Think.lang.zhichen}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="zhicheng" placeholder="{$Think.lang.zhichen}" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.author}</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" value="{$config['author']}" placeholder="作者" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.click}</label>
                <div class="layui-input-inline">
                    <input type="text" name="views" value="<?php echo mt_rand(5,15);?>" placeholder="浏览次数"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.addtime}</label>
                <div class="layui-input-inline">
                    <input type="text" name="addtime" value="<?php echo date('Y/m/d H:i:s',time())?>" required
                        lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.isshow}</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="istop" lay-skin="switch" lay-text="是|否" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.slt}</label>
                <div class="layui-input-block">
                    <input type="hidden" name="pic" placeholder="" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn" id="uploadimg">
                        <i class="layui-icon">&#xe67c;</i>{$Think.lang.uploadimg}
                    </button>
                    <div id="thumb_list">

                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{$Think.lang.content}</label>
                <div class="layui-input-block">
                    <div id="content" name="content" type="text/plain" style="height:300px;"></div>
                </div>
            </div>
            <input type="hidden" name="__token__" value="{$Request.token}" />
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">{$Think.lang.add}</button>
                </div>
            </div>
        </form>
    </div>
    <script src="__ADMIN__/vendor/js/jquery.js"></script>
    <script src="__ADMIN__/vendor/layui/layui.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="__ADMIN__/vendor/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__ADMIN__/vendor/ueditor/ueditor.all.js"></script>
    <script src="__ADMIN__/custom/js/admin.js"></script>
    <script>
        var ue = UE.getEditor('content', {
            initialFrameWidth: null,
        });
        layui.use(['form', 'upload'], function () {
            var form = layui.form;
            var upload = layui.upload;
            //监听提交
            form.on('submit(formDemo)', function (data) {
            });
            //监听栏目
            form.on('select(lanmu)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                var lmtype = $(data.elem).find('option:selected').attr('type');
                switch (lmtype) {
                    case "6":
                        $('#team').fadeIn();
                        $('#model').hide();
                        break;
                    case "3":
                        $('#model').fadeIn();
                        $('#team').hide();
                        break;
                    default:
                        $('#model').hide();
                        $('#team').hide();
                        break;
                }
            });
            //重写验证规则
            form.verify({
                required:function (value) {
                if(value=="" || value.trim().length()==0){
                    return "{:lang('Required cannot be empty')}";
                }
            }

            });
            //创建一个上传组件
            upload.render({
                elem: '#uploadimg'
                , url: '{:url("common/uploadimg")}'
                , accept: 'images' //允许上传的文件类型
                , field: "imgfile"
                , size: 2048 //最大允许上传的文件大小
                , done: function (res, index, upload) { //上传后的回调
                    layer.close(layer.index, { isOutAnim: true });
                    setTimeout(function () {
                        layer.msg(res.msg);
                        if (res.code == 1) {
                            var pic = $('input[name=pic]').val();
                            if (pic == "") {
                                $('input[name=pic]').val(res.path);
                            } else {
                                $('input[name=pic]').val(pic + "," + res.path);
                            }
                            var str;
                            str = "<span>";
                            str = str + '<img src="/' + res.path + '" alt="" height="80">';
                            str = str + '<button type="button" class="layui-btn layui-btn-danger layui-btn-mini delimg" onclick="delimg(this);" data="' + res.img + '">';
                            str = str + '<i class="layui-icon">&#xe640;</i>';
                            str = str + '</button>';
                            str = str + '</span>';
                            $('#thumb_list').append(str);
                        } else {

                        }

                    }, 500);
                }
                , before: function () {
                    var index = layer.load();
                }

                //,……
            })
        });
        $(function () {
            $(window.parent.document).find('#righttitle').text($('title').text());
        });
        //删除栏目图片
        function delimg(obj) {
            var picurl = $(obj).attr('data');
            $.ajax({
                type: "post",
                url: "{:url('common/delimg')}",
                data: { 'url': picurl },
                success: function (res) {
                    var picvalue = $('input[name=pic]').val();
                    var str = "";
                    if (res.code == 1 || res.code == 2) {
                        //栏目图片文本框中图片地址处理
                        if (picvalue == picurl) {
                            $('input[name=pic]').val('');
                        } else {
                            str = picvalue.replace(picurl + ",", "");
                            str = str.replace("," + picurl, "");
                            $('input[name=pic]').val(str);
                        }
                        //删除/移除缩略图
                        $(obj).parent().remove();
                        layer.msg(res.msg);
                    }
                    if (res.code == 0) {
                        layer.msg(res.msg);
                    }
                }
            });
        }
    </script>
</body>

</html>